import { Card, NavBar } from "antd-mobile";
import React from "react";
import { useLocation, useNavigate } from "react-router-dom";
import MyRiLi from "../../component/MyRiLi";
import { Radio } from "antd-mobile";
import { ProductCard } from "react-vant";
import { Stepper } from "antd-mobile";
import { SubmitBar } from "react-vant";

import "./index.css";
function Index() {
  const navigate = useNavigate();
  const { state } = useLocation();
  console.log(state);

  const handleToDeit = () => {
    navigate("/orderdel", { state: state });
  };
  return (
    <div>
      {/* 14.实现购票页功能
14-1.详情页点击立即购票，跳转到购票页，实现顶部日历组件，当前日期高亮显示 */}
      <NavBar onBack={() => navigate(-1)}>购票</NavBar>
      <MyRiLi></MyRiLi>

      <Card title="请选择你的票">
        <Radio.Group defaultValue="1">
          <Card
            title="VIP参观"
            extra={<Radio value="1"></Radio>}
            style={{ marginTop: "30px" }}
          >
            <ProductCard
              price={state.price}
              desc={state.id}
              title={state.title}
              thumb={state.image}
            />
            {/* .实现数量加和数量减功能，显示最小数字为0
14-4.数量到最大或最小的时候，对应的按钮禁用 */}
            <div className="bot">
              <p>显示票价明细</p> <Stepper min={0} max={5} />
            </div>
          </Card>
          <Card
            title="普通参观"
            extra={<Radio value="2"></Radio>}
            style={{ marginTop: "30px" }}
          >
            <ProductCard
              price={state.price}
              desc={state.id}
              title={state.title}
              thumb={state.image}
            />

            <div className="bot">
              <p>显示票价明细</p> <Stepper min={0} max={5} />
            </div>
          </Card>
          {/* 
            <Radio value="2">第二项</Radio> */}
        </Radio.Group>
      </Card>

      <SubmitBar
        price={state.price * 100}
        buttonText="继续"
        onSubmit={() => handleToDeit()}
      />
    </div>
  );
}

export default Index;
